<template>
  <div class="wrap">
    <!-- 顶部结构 -->
    <div class="top" v-show="workData.baseMap">
      <div class="hosname">{{workData.baseMap?.hosname}}</div>
      <div class="line"></div>
      <div>{{workData.baseMap?.bigname}}</div>
      <div class="dot">·</div>
      <div class="hosdepartment">{{workData.baseMap?.depname}}</div>
    </div>
    <!-- 中间展示日期的结构 -->
    <div class="center">
      <h1 class="time">{{workData.baseMap?.workDateString}}</h1>
      <div class="container">
        <div
          class="item"
          v-for="(item,index) in workData?.bookingScheduleList"
          :key="item"
          :class="{activeItem:index==activeIndex,active:item?.status==1||item?.status==0&&item?.availableNumber>=0}"
          @click="changeItem(item,index)"
        >
          <div class="top">{{item?.workDate}}-{{ item?.dayOfWeek }}</div>
          <div class="bottom">
            <div v-if="item?.status===-1">停止挂号</div>
            <div
              v-if="item?.status===0"
            >{{item?.availableNumber==-1?'已约满':`有号（${item?.availableNumber}）`}}</div>
            <div v-if="item?.status===1">即将放号</div>
          </div>
        </div>
      </div>
      <el-pagination
        v-model:current-page="pageNo"
        layout="prev, pager, next"
        :total="workData?.total"
        class="mt-4"
        @current-change="handler"
      />
    </div>
    <!-- 底部结构 -->
    <div class="bottom_content">
      <!-- 展示即将放号的时间 -->
      <div class="will" v-if="workTime.status==1">
        <span>2024年5月14日 16:18</span>
        <span>放号</span>
      </div>
      <!-- 展示医生的结构：上午、下午 -->
      <div class="doctor" v-else>
        <div class="morning">
          <div class="tip">
            <span>上午号源</span>
          </div>
          <div class="doc_info" v-show="morningArr" v-for="item in morningArr" :key="item.id">
            <div class="left">
              <div class="info_top">
                <span>{{ item?.title }}</span>
                <span class="line"></span>
                <span>{{item?.docname}}</span>
              </div>
              <div class="info_bottom">{{item?.skill}}</div>
            </div>
            <div class="right">
              <div class="money">￥{{item?.amount}}</div>
              <el-button type="primary" size="default" @click="goStep2(item)">剩余{{item?.availableNumber}}</el-button>
            </div>
          </div>
        </div>
        <div class="after">
          <div class="tip">
            <span>下午号源</span>
          </div>
          <div class="doc_info" v-show="afternoonArr" v-for="item in morningArr" :key="item.id">
            <div class="left">
              <div class="info_top">
                <span>{{ item?.title }}</span>
                <span class="line"></span>
                <span>{{item?.docname}}</span>
              </div>
              <div class="info_bottom">{{item?.skill}}</div>
            </div>
            <div class="right">
              <div class="money">￥{{item?.amount}}</div>
              <el-button type="primary" size="default" @click="goStep2(item)">剩余{{item?.availableNumber}}</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// @ts-ignore
import {onMounted,ref,computed} from "vue"
// @ts-ignore
import {useRoute,useRouter} from "vue-router"
// @ts-ignore
import {reqHospitalWork,reqHospitalDoctor} from "@/api/hospital"
// @ts-ignore
import type {HospitalWorkData,DoctorResponseData,DocArr,Doctor} from "@/api/hospital/type"
let route=useRoute()
let router=useRouter()
// 当前页码
let pageNo=ref<number>(1)
let activeIndex=ref<number>(0)
// 每页展示几条数据
let limit=ref<number>(6)
// 存储医院科室挂号的数据
let workData=ref<any>({})
// 存储排班日期：当前数据的第一个
let workTime:any=ref<any>({})
// 存储排班医生的数据
let docArr=ref<DocArr>([])
const fetchWorkData=async()=>{
    let result:HospitalWorkData=await reqHospitalWork(pageNo.value,limit.value,route.query.hoscode as string,route.query.depcode as string)
    if(result.code===200){
        workData.value=result.data
        workTime.value=workData.value.bookingScheduleList[0]
        getDoctorWorkData()
      }
}
// 获取某一天医生排班的数据
const getDoctorWorkData=async()=>{
  // 医院的编号
  let hoscode:string=route.query.hoscode as string
  let depcode:string=route.query.depcode as string
  let workDate:string=workTime.value.workDate
  // 获取排班医生的数据
  let result:DoctorResponseData=await reqHospitalDoctor(hoscode,depcode,workDate)
  if(result.code==200){
    docArr.value=result.data
  }
}
// 计算出上午排班的医生的数据
let morningArr=computed(()=>{
  return docArr.value.filter((doc:Doctor)=>{
    return doc.workTime==0
  })
})
let afternoonArr=computed(()=>{
  return docArr.value.filter((doc:Doctor)=>{
    return doc.workTime==1
  })
})
// 翻页
const handler=()=>{
    fetchWorkData()
}
// 跳转至就诊人页面
const goStep2=(doctor:Doctor)=>{
  router.push({path:'/hospital/register_step2',query:{docId:doctor.id}})
}
// 点击切换
const changeItem=(item:any,index:number)=>{
  activeIndex.value=index
  workTime.value=item
  getDoctorWorkData()
}
onMounted(()=>{
  fetchWorkData()
})
</script>

<style lang="scss" scoped>
.wrap {
  margin-top: 20px;
  .top {
    display: flex;
    align-items: center;
    color: #666;
    .line {
      width: 1px;
      height: 14px;
      background-color: #666;
      margin: 0 5px;
    }
    .dot {
      margin: 0 5px;
    }
  }
  .center {
    display: flex;
    flex-direction: column;
    margin-top: 60px;
    align-items: center;
    .time {
      font-weight: 700;
      color: #666;
      font-size: 14px;
      cursor: pointer;
    }
    .container {
      display: flex;
      justify-content: space-between;
      width: 100%;
      cursor: pointer;
      margin-bottom: 30px;
      .item {
        flex: 1;
        border: 1px solid #6663;
        margin: 0 8px;
        text-align: center;
        font-size: 14px;
        border-radius: 4px;
        transition: all 0.2s;
        &.active {
          border: 1px solid #e8f2ff;
          .top {
            background-color: #e8f2ff;
            color: #30353b;
          }
          .bottom {
            div {
              color: #4990f1;
            }
          }
        }
        &.activeItem {
          border: 1px solid #4990f1;
          color: #4990f1;
          .top {
            background-color: #4990f1;
            color: #fff;
          }
          .bottom {
            div {
              color: #4990f1;
              font-weight: 700;
            }
          }
        }
        .top {
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #6663;
          padding: 6px;
          color: #666;
        }
        .bottom {
          display: flex;
          height: 60px;
          align-items: center;
          justify-content: center;
          div {
            color: #666;
          }
        }
      }
      margin-top: 20px;
    }
  }
  .bottom_content {
    margin-top: 60px;
    padding-bottom: 70px;
    .will {
      text-align: center;
      font-weight: 700;
      color: #666;
    }
    .doctor {
      cursor: pointer;
      .after {
        margin-top: 50px;
      }
      .tip {
        span {
          display: flex;
          align-items: center;
          color: #7f7f7f;
          font-size: 15px;
          letter-spacing: 1px;
          &::before {
            content: "";
            display: inline-block;
            width: 4px;
            height: 15px;
            background: #4990f1;
            border-radius: 2px;
            margin-right: 5px;
          }
        }
      }
      .doc_info {
        display: flex;
        justify-content: space-between;
        margin-top: 40px;
        letter-spacing: 1px;
        .info_top {
          display: flex;
          align-items: center;
          font-size: 14px;
          font-weight: 700;
          color: #333;
          margin-bottom: 30px;
          .line {
            display: inline-block;
            width: 1px;
            height: 16px;
            background-color: #7f7f7f;
            margin: 0 10px;
          }
        }
        .info_bottom {
          font-size: 14px;
          color: #7f7f7f;
          font-weight: 700;
        }
        .right {
          display: flex;
          align-items: center;
          .money {
            letter-spacing: 1px;
            color: #4990f1;
            font-weight: 700;
            margin-right: 20px;
            font-size: 14px;
          }
          .el-button {
            width: 140px;
            height: 44px;
            background-color: #4490f1;
            box-shadow: 0 10px 20px -10px rgba(73, 144, 241, 0.5);
            border-radius: 4px;
            color: #fff;
            font-size: 16px;
            font-weight: 500;
            transition: all 0.2s ease;
          }
        }
      }
    }
  }
}

::v-deep(.el-pager li.is-active) {
  color: #4990f1;
}
</style>